import React, {Component} from 'react'
import {Link} from 'react-router-dom'
import {ThemeColor} from '../color/ThemeColor'
import Icon from './Icon'
import {IconSizeType} from './Icon'

export type IconSize = 'sm' | 'md'

export interface ButtonIconProps {
  iconPath: any
  title: string
  className?: string
  disabled?: boolean
  onClick?: (e: any) => void
  href?: string
  to?: string
  id?: string

  size?: IconSize
  color?: string
  isHoverArea?: boolean
  hoverIconColor?: ThemeColor
}

// Кнопка из иконки
class ButtonIcon extends Component<ButtonIconProps> {
  getIconSize = (iconSize: IconSize): IconSizeType => {
    if (iconSize === 'sm') {
      return '16px'
    }
    return '24px'
  }

  render(): React.ReactNode {
    let {
      iconPath,
      title,
      className,
      disabled,
      onClick,
      id,
      to,
      href,
      isHoverArea,
      hoverIconColor,
      size,
      color,
    } = this.props
    const classNameIconContent =
      'button-icon' +
      ' ' +
      (size ? size : 'md') +
      ' ' +
      (isHoverArea ? 'hover-area' : 'hover-light') +
      ' ' +
      'hover-icon-' +
      (isHoverArea ? 'area-' : 'light-') +
      'color-' +
      (hoverIconColor ? hoverIconColor : 'primary') +
      ' ' +
      (disabled ? 'disabled' : '')

    let renderIcon: React.ReactNode = (
      <Icon path={iconPath} color={color} size={this.getIconSize(size)} />
    )

    let iconContent: React.ReactNode
    if (href) {
      iconContent = (
        <a href={href} className={classNameIconContent} id={id} title={title} onClick={onClick}>
          {renderIcon}
        </a>
      )
    } else if (to) {
      iconContent = (
        <Link to={to} className={classNameIconContent} id={id} title={title}>
          {renderIcon}
        </Link>
      )
    } else {
      iconContent = (
        <button
          type={'button'}
          id={id}
          className={classNameIconContent}
          title={title}
          onClick={onClick}
          disabled={disabled}>
          {renderIcon}
        </button>
      )
    }

    let classNameResult: string =
      'd-flex justify-content-center align-items-center ' + (className ? className : '')

    return <span className={classNameResult}>{iconContent}</span>
  }
}

export default ButtonIcon
